<template>
  <div>
    <div class="card-color center-item-content center-item-first">
      <el-page-header @back="goBack" :content="note.name" ></el-page-header>
    </div>

    <div class="card-color center-item center-item-content" >
      <div v-loading="loading" v-for="item in htmlContents" :key="item.key" class="markdown-body" style="text-align: left;min-height: 50px;" v-html="item.content" ref="markdownBody"/>
    </div>
    <div class="center-item">
      <comment :note="note"/>
    </div>
    <div class="center-item">
      <recommend :note="note"/>
    </div>

  </div>
</template>

<script>
import marked from 'marked'
import request from '@/utils/request'
import comment from './comment/index'
import recommend from './recommend/index'
export default {
  components: {
    comment, recommend
  },
  props: {
    notebook: {
      type: Object,
      default: () => {}
    }
  },
  name: 'content-reader',
  data: function () {
    return {
      delete: true,
      loading: true,
      note: {},
      originContent: '',
      htmlContents: []
    }
  },
  watch: {

  },
  destroyed () {
    this.$store.state.catalogs = []
  },
  created () {
    this.note.id = this.$route.query.note_id
    const title = this.$route.query.title
    this.note.name = title
    if (title) {
      document.title = title
    }
    this.queryNoteContent()
    this.queryNotebookByNote()
  },
  methods: {
    // 查询笔记的所属笔记本
    queryNotebookByNote: function () {
      request({
        url: '/notebook/notebook/queryNotebookByNote',
        method: 'post',
        data: this.note
      }).then(res => {
        if (res.result) {
          if (!this.notebook && res.data) {
            this.notebook = res.data
            this.$store.state.chooseMenuId = res.data.id
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    },
    // 查询笔记内容
    queryNoteContent: function () {
      if (!this.note) return
      this.loading = true
      this.$progress.start()
      request({
        url: '/notebook/note/queryNoteContent',
        method: 'post',
        data: this.note
      }).then(res => {
        if (res.result) {
          this.originContent = res.data
          this.changeToHtml()
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    },
    // 转化为html
    changeToHtml: function () {
      const rendererMD = new marked.Renderer()
      marked.setOptions({
        renderer: rendererMD,
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false
      })// 基本设置

      this.$nextTick(() => {
        this.htmlContents.shift()
        const html = {
          key: (new Date()).valueOf(),
          content: marked(this.originContent)
        }
        this.htmlContents.push(html)
        this.$progress.done()
        this.loading = false
        setTimeout(this.getCatalog, 5)
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    getCatalog: function () {
      const divs = this.$refs.markdownBody
      const catalogs = []
      if (divs) {
        divs.forEach(div => {
          const hs = div.children
          if (hs) {
            hs.forEach(h => {
              if (h.tagName === 'H1' || h.tagName === 'H2' || h.tagName === 'H3' || h.tagName === 'H4' || h.tagName === 'H5') {
                catalogs.push({
                  key: h.tagName,
                  text: h.innerText,
                  space: h.tagName === 'H2' ? 2 : h.tagName === 'H3' ? 3 : h.tagName === 'H4' ? 4 : h.tagName === 'H5' ? 5 : 0
                })
              }
            })
          }
        })
      }
      this.$store.state.catalogs = catalogs
    }
  }
}
</script>

<style>
  .reader-content {
    padding:15px 15px 15px 15px;
  }

  .content-margin {
    margin:1px 0 0 0;
  }
</style>
